'use client';

import React, { ReactNode } from 'react';
import useBreakpoint from '@/hooks/use-breakpoint';

interface ResponsiveContainerProps {
  children: ReactNode;
  className?: string;
  mobileClassName?: string;
  tabletClassName?: string;
  desktopClassName?: string;
  fullHeightOnMobile?: boolean;
  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | 'none';
  padding?: boolean;
  centerContent?: boolean;
}

/**
 * 响应式容器组件，根据设备类型应用不同的样式
 */
export default function ResponsiveContainer({
  children,
  className = '',
  mobileClassName = '',
  tabletClassName = '',
  desktopClassName = '',
  fullHeightOnMobile = false,
  maxWidth = 'lg',
  padding = true,
  centerContent = false,
}: ResponsiveContainerProps) {
  const { isMobile, isTablet, isDesktop } = useBreakpoint();
  
  // 基础类名
  let containerClassName = `${className} `;
  
  // 添加最大宽度类
  if (maxWidth !== 'none') {
    switch (maxWidth) {
      case 'sm':
        containerClassName += 'max-w-sm ';
        break;
      case 'md':
        containerClassName += 'max-w-md ';
        break;
      case 'lg':
        containerClassName += 'max-w-lg ';
        break;
      case 'xl':
        containerClassName += 'max-w-xl ';
        break;
      case '2xl':
        containerClassName += 'max-w-2xl ';
        break;
      case 'full':
        containerClassName += 'max-w-full ';
        break;
    }
    
    // 如果不是'full'或'none'，添加水平居中
    if (maxWidth !== 'full') {
      containerClassName += 'mx-auto ';
    }
  }
  
  // 添加内边距
  if (padding) {
    containerClassName += 'px-4 sm:px-6 lg:px-8 ';
  }
  
  // 居中内容
  if (centerContent) {
    containerClassName += 'flex flex-col items-center ';
  }
  
  // 根据设备类型添加额外的类名
  if (isMobile) {
    containerClassName += `${mobileClassName} `;
    if (fullHeightOnMobile) {
      containerClassName += 'min-h-screen-safe '; // 使用安全区域高度
    }
  } else if (isTablet) {
    containerClassName += `${tabletClassName} `;
  } else if (isDesktop) {
    containerClassName += `${desktopClassName} `;
  }
  
  return (
    <div className={containerClassName.trim()}>
      {children}
    </div>
  );
} 